<template>
  <div class="cap-page">
    <div class="deviceCard">
      <el-card class="box-card">
        <span>抓拍记录</span>
        <br>
        <div class="datePicker">
          <el-date-picker
              v-model="captureTime"
              type="datetimerange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYYMMDDHHmmss"
              @change="searchCap"
              :shortcuts="shortcuts">
          </el-date-picker>
        </div>
      </el-card>
    </div>
    <div class="imageDisplay">
      <el-row :gutter="20" v-for="index in range">
        <el-col :span="6" v-for="item in photoList.slice(currentPage * pageSize - pageSize + index,currentPage * pageSize - pageSize + index + 4)" :key="item">
          <el-image :src="item.photo_id" :preview-src-list="[item.photo_id]" style="width: 275px; height: 200px; margin-left:10px;border-radius: 10px;margin-top: 30px">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <br>
          <span>抓拍时间:{{item.datetime}}</span>
        </el-col>
      </el-row>
      <div class="pagination">
        <el-pagination
            :hide-on-single-page="false"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[8, 16, 32, 64]"
            :page-size="pageSize"
            :total="totalPages">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {rangeArray} from "@/utils/toolUtils";
import {getPhotoView, showMessage} from "@/utils/displayUtils";
import {mapGetters} from "vuex";

export default {
  name: "index",
  computed: {
    ...mapGetters(['loginStatus','username','password','email','roleId','uid'])
  },
  data() {
    return {
      shortcuts:[
        {
          text: '当天',
          value: () => {
            const end = new Date()
            const start = new Date()
            return [start, end]
          },
        },{
        text: '最近一周',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          return [start, end]
        },
      }, {
        text: '最近一个月',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          return [start, end]
        },
      }, {
        text: '最近三个月',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          return [start, end]
        },
      }],
      captureTime: '',
      imgUrls: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        require('../../../static/photo/IMG_20211031_133113.jpg'),
        require('../../../static/photo/IMG_20211211_135213.jpg'),
        require('../../../static/photo/IMG_20220101_174207.jpg'),
        require('../../../static/photo/IMG_20220101_174222.jpg'),
        require('../../../static/photo/IMG_20220213_145046.jpg'),
        require('../../../static/photo/IMG_20220405_222325.jpg'),
        require('../../../static/photo/IMG_20220405_222342.jpg'),
        require('../../../static/photo/IMG_20220405_222353.jpg'),
      ],
      photoList:[],
      pageSize: 8,
      totalPages: 16,
      currentPage: 1,
      range: rangeArray(0,4,4)
    }
  },
  methods: {
    // 改变页面尺寸触发事件
    handleSizeChange: function (val){
      this.pageSize = val
      this.range = rangeArray(0,val-4,4)
      // showMessage(this,'页面尺寸'+val+' '+this.range,'success')
    },
    // 改变当前页触发事件
    handleCurrentChange: function (val){
      // showMessage(this,'当前页面'+val,'success')
      this.currentPage = val
    },
    searchCap: function (){
      console.log(this.captureTime)
      getPhotoView(this.uid,this.captureTime[0],this.captureTime[1]).then((data) => {
        this.photoList = data.photo_list
        showMessage(this,data.msg,'success')
      }).catch((error) => {
        showMessage(this,error,'warning')
      })
    }
  }
}
</script>

<style scoped>
.cap-page{
  background:url("../../assets/background/homepage.jpg");
  width: 100%;
  height: 800px;
  position: fixed;
  margin-top: 0px;/*上边距*/
  margin-left: -30px;/*左边距*/
  margin-right: 30px;
  background-size:100% 100%;
  /*height: auto;*/
  overflow-x: hidden;
  overflow-y: auto;
}
.box-card {
  width: 480px;
}

.deviceCard {
  display: flex;
  justify-content: center;
  align-content: center;
  padding-top: 20px;
}

.datePicker{
  margin-top: 20px;
}
.imageDisplay{
  margin-top: 20px;
}
.pagination{
  margin-left: 35%;
  margin-top: 20px;
  margin-bottom: 40px;
}
</style>
